<template>
  <view class="login-container">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 头部区域 -->
      <view class="header">
        <view class="logo">
          <text class="logo-icon">📱</text>
        </view>
        <text class="welcome-text">欢迎回来</text>
        <text class="subtitle">请登录您的账号</text>
      </view>
      
      <!-- 登录表单 -->
      <view class="form-container">
        <view class="form-group">
          <text class="form-label">用户名</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              type="text" 
              placeholder="请输入用户名"
              v-model="formData.username"
              :class="{ 'error': errors.username }"
              @input="validateUsername"
            />
            <text class="input-icon">👤</text>
          </view>
          <text class="error-text" v-if="errors.username">{{ errors.username }}</text>
        </view>
        
        <view class="form-group">
          <text class="form-label">密码</text>
          <view class="input-wrapper">
            <input 
              class="form-input" 
              :type="showPassword ? 'text' : 'password'"
              placeholder="请输入密码"
              v-model="formData.password"
              :class="{ 'error': errors.password }"
              @input="validatePassword"
            />
            <text class="input-icon" @click="togglePassword">
              {{ showPassword ? '👁️' : '🔒' }}
            </text>
          </view>
          <text class="error-text" v-if="errors.password">{{ errors.password }}</text>
        </view>
        
        <!-- 选项区域 -->
        <view class="options">
          <view class="remember-me" @click="toggleRemember">
            <view class="checkbox" :class="{ 'checked': formData.remember }">
              <text class="checkmark" v-if="formData.remember">✓</text>
            </view>
            <text class="remember-text">记住我</text>
          </view>
          <text class="forgot-link" @click="goToForgotPassword">忘记密码？</text>
        </view>
        
        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :class="{ 'loading': isLoading }"
          :disabled="!isFormValid || isLoading"
          @click="handleLogin"
        >
          <text v-if="!isLoading">登录</text>
          <text v-else>登录中...</text>
        </button>
        
        <!-- 注册链接 -->
        <view class="register-link">
          <text class="register-text">还没有账号？</text>
          <text class="register-btn" @click="handleRegister">立即注册</text>
        </view>
        
        <!-- 管理员登录入口 -->
        <!-- #ifdef H5 -->
        <view class="admin-login-link">
          <view class="divider">
            <view class="divider-line"></view>
            <text class="divider-text">或</text>
            <view class="divider-line"></view>
          </view>
          <button class="admin-btn" @click="goToAdminLogin">
            <text class="admin-icon">🔐</text>
            <text>管理员登录</text>
          </button>
        </view>
        <!-- #endif -->
      </view>
    </view>
    
    <!-- 忘记密码弹窗 -->
    <view class="forgot-password-modal" v-if="showForgotModal" @click="closeForgotModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">忘记密码</text>
          <text class="modal-close" @click="closeForgotModal">✕</text>
        </view>
        
        <view class="modal-body">
          <!-- 步骤一：输入邮箱 -->
          <view v-if="forgotStep === 1" class="step-content">
            <text class="step-title">请输入您的邮箱地址</text>
            <text class="step-desc">我们将向您的邮箱发送验证码</text>
            
            <view class="form-group">
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  type="text" 
                  placeholder="请输入邮箱地址"
                  v-model="forgotForm.email"
                  :class="{ 'error': forgotErrors.email }"
                  @input="validateEmail"
                />
                <text class="input-icon">📧</text>
              </view>
              <text class="error-text" v-if="forgotErrors.email">{{ forgotErrors.email }}</text>
            </view>
            
            <button 
              class="modal-btn primary"
              :disabled="!isEmailValid || isSendingCode"
              @click="sendVerificationCode"
            >
              <text v-if="!isSendingCode">发送验证码</text>
              <text v-else>发送中...</text>
            </button>
          </view>
          
          <!-- 步骤二：输入验证码 -->
          <view v-if="forgotStep === 2" class="step-content">
            <text class="step-title">请输入验证码</text>
            <text class="step-desc">验证码已发送至 {{ maskEmail(forgotForm.email) }}</text>
            
            <view class="form-group">
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  type="text" 
                  placeholder="请输入6位验证码"
                  v-model="forgotForm.verificationCode"
                  maxlength="6"
                  :class="{ 'error': forgotErrors.verificationCode }"
                  @input="validateVerificationCode"
                />
                <text class="input-icon">🔢</text>
              </view>
              <text class="error-text" v-if="forgotErrors.verificationCode">{{ forgotErrors.verificationCode }}</text>
            </view>
            
            <view class="resend-section">
              <text class="resend-text" v-if="countdown > 0">{{ countdown }}秒后可重新发送</text>
              <text class="resend-link" v-else @click="sendVerificationCode">重新发送验证码</text>
            </view>
            
            <view class="modal-buttons">
              <button class="modal-btn secondary" @click="goBackToEmail">返回</button>
              <button 
                class="modal-btn primary"
                :disabled="!isCodeValid || isVerifying"
                @click="verifyCode"
              >
                <text v-if="!isVerifying">验证</text>
                <text v-else>验证中...</text>
              </button>
            </view>
          </view>
          
          <!-- 步骤三：重置密码 -->
          <view v-if="forgotStep === 3" class="step-content">
            <text class="step-title">设置新密码</text>
            <text class="step-desc">请设置您的新密码</text>
            
            <view class="form-group">
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  :type="showNewPassword ? 'text' : 'password'"
                  placeholder="请输入新密码"
                  v-model="forgotForm.newPassword"
                  :class="{ 'error': forgotErrors.newPassword }"
                  @input="validateNewPassword"
                />
                <text class="input-icon" @click="toggleNewPassword">
                  {{ showNewPassword ? '👁️' : '🔒' }}
                </text>
              </view>
              <text class="error-text" v-if="forgotErrors.newPassword">{{ forgotErrors.newPassword }}</text>
            </view>
            
            <view class="form-group">
              <view class="input-wrapper">
                <input 
                  class="form-input" 
                  :type="showConfirmPassword ? 'text' : 'password'"
                  placeholder="请确认新密码"
                  v-model="forgotForm.confirmPassword"
                  :class="{ 'error': forgotErrors.confirmPassword }"
                  @input="validateConfirmPassword"
                />
                <text class="input-icon" @click="toggleConfirmPassword">
                  {{ showConfirmPassword ? '👁️' : '🔒' }}
                </text>
              </view>
              <text class="error-text" v-if="forgotErrors.confirmPassword">{{ forgotErrors.confirmPassword }}</text>
            </view>
            
            <button 
              class="modal-btn primary"
              :disabled="!isPasswordValid || isResetting"
              @click="resetPassword"
            >
              <text v-if="!isResetting">重置密码</text>
              <text v-else>重置中...</text>
            </button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import authService from '../../services/auth.js'

export default {
  data() {
    return {
      statusBarHeight: 0,
      formData: {
        username: '',
        password: '',
        remember: false
      },
      errors: {
        username: '',
        password: ''
      },
      showPassword: false,
      isLoading: false,
      
      // 忘记密码相关数据
      showForgotModal: false,
      forgotStep: 1, // 1: 输入邮箱, 2: 输入验证码, 3: 重置密码
      forgotForm: {
        email: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      },
      forgotErrors: {
        email: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      },
      showNewPassword: false,
      showConfirmPassword: false,
      isSendingCode: false,
      isVerifying: false,
      isResetting: false,
      countdown: 0,
      countdownTimer: null
    }
  },
  computed: {
    isFormValid() {
      return this.formData.username.length >= 3 && 
             this.formData.password.length >= 6 && 
             !this.errors.username && 
             !this.errors.password
    },
    
    // 忘记密码相关计算属性
    isEmailValid() {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      return emailRegex.test(this.forgotForm.email) && !this.forgotErrors.email
    },
    
    isCodeValid() {
      return this.forgotForm.verificationCode.length === 6 && !this.forgotErrors.verificationCode
    },
    
    isPasswordValid() {
      return this.forgotForm.newPassword.length >= 6 && 
             this.forgotForm.confirmPassword === this.forgotForm.newPassword &&
             !this.forgotErrors.newPassword && 
             !this.forgotErrors.confirmPassword
    }
  },
  onLoad() {
    this.getStatusBarHeight()
    this.checkLoginStatus()
  },
  methods: {
    // 获取状态栏高度
    getStatusBarHeight() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 20
    },
    
    // 检查登录状态
    checkLoginStatus() {
      const loginStatus = authService.checkLoginStatus()
      if (loginStatus.isLoggedIn) {
        // #ifdef H5
        // 检查URL参数：如果带有 ?noRedirect=1，则不自动跳转
        const urlParams = new URLSearchParams(window.location.search)
        if (urlParams.get('noRedirect') === '1') {
          return
        }
        
        const userInfo = loginStatus.userInfo || {}
        const roleName = userInfo.role === 'admin' ? '管理员' : 
                        userInfo.role === 'merchant' ? '商家' : '用户'
        
        // 所有角色都显示提示，只提供退出登录选项（更安全）
        uni.showModal({
          title: '安全提示',
          content: `检测到 ${roleName} 账号（${userInfo.username || '未知'}）已登录。\n\n请退出后重新登录以确保账号安全。`,
          showCancel: false,
          confirmText: '退出登录',
          success: (res) => {
            if (res.confirm) {
              this.handleLogout()
            }
          }
        })
        // #endif
        
        // #ifndef H5
        // 非H5环境直接跳转
        this.redirectByRole(loginStatus.userInfo)
        // #endif
      }
    },
    
    // 退出登录（清除缓存）
    handleLogout() {
      uni.showLoading({ title: '退出中...' })
      
      // 清除 uni.storage
      uni.removeStorageSync('jwt_token')
      uni.removeStorageSync('user_info')
      
      // #ifdef H5
      // 清除 sessionStorage（管理后台的数据）
      if (window.sessionStorage) {
        window.sessionStorage.removeItem('admin_token')
        window.sessionStorage.removeItem('user_role')
        window.sessionStorage.removeItem('admin_user')
      }
      // 也清除 localStorage（以防有旧数据）
      if (window.localStorage) {
        window.localStorage.removeItem('admin_token')
        window.localStorage.removeItem('user_role')
        window.localStorage.removeItem('admin_user')
      }
      // #endif
      
      uni.hideLoading()
      uni.showToast({
        title: '已退出登录',
        icon: 'success',
        duration: 1500
      })
      
      // 刷新页面
      setTimeout(() => {
        // #ifdef H5
        window.location.reload()
        // #endif
        
        // #ifndef H5
        uni.reLaunch({ url: '/pages/login/login' })
        // #endif
      }, 1500)
    },

    // 根据角色跳转
    redirectByRole(userInfo) {
      if (!userInfo) {
        uni.reLaunch({
          url: '/pages/home/home'
        })
        return
      }
      
      // 管理员跳转到独立的PC端管理后台
      if (userInfo.role === 'admin') {
        // #ifdef H5
        // 先清除旧的登录信息（防止残留）
        if (window.sessionStorage) {
          window.sessionStorage.removeItem('admin_token')
          window.sessionStorage.removeItem('user_role')
          window.sessionStorage.removeItem('admin_user')
        }
        
        // 管理员使用 sessionStorage（关闭标签页自动清除，更安全）
        const token = uni.getStorageSync('jwt_token')
        if (token) {
          window.sessionStorage.setItem('admin_token', token)
          window.sessionStorage.setItem('user_role', 'admin')
          window.sessionStorage.setItem('admin_user', JSON.stringify(userInfo))
          
          // 跳转到独立的管理后台（端口5174）
          const adminUrl = process.env.NODE_ENV === 'production' 
            ? '/admin/'  // 生产环境：同域名不同路径
            : 'http://localhost:5174/'  // 开发环境：独立端口
          
          window.location.href = adminUrl
        }
        // #endif
        
        // #ifndef H5
        uni.showToast({
          title: '请在PC浏览器访问管理后台',
          icon: 'none',
          duration: 3000
        })
        // #endif
      } else if (userInfo.role === 'merchant') {
        // 商家跳转到商家端首页
        uni.reLaunch({
          url: '/pages/merchant/home/home'
        })
      } else {
        // 用户跳转到用户端首页
        uni.reLaunch({
          url: '/pages/home/home'
        })
      }
    },
    
    // 验证用户名
    validateUsername() {
      const username = this.formData.username.trim()
      if (username.length < 3) {
        this.errors.username = '用户名至少3个字符'
      } else {
        this.errors.username = ''
      }
    },
    
    // 验证密码
    validatePassword() {
      const password = this.formData.password
      if (password.length < 6) {
        this.errors.password = '密码至少6个字符'
      } else {
        this.errors.password = ''
      }
    },
    
    // 切换密码显示
    togglePassword() {
      this.showPassword = !this.showPassword
    },
    
    // 切换记住我
    toggleRemember() {
      this.formData.remember = !this.formData.remember
    },
    
    // 处理登录
    async handleLogin() {
      if (!this.isFormValid) return
      
      this.isLoading = true
      
      try {
        // 调用真实的登录API
        const response = await authService.login({
          username: this.formData.username,
          password: this.formData.password,
          remember: this.formData.remember
        })
        
        uni.showToast({
          title: '登录成功',
          icon: 'success'
        })
        
        // 登录成功后根据角色跳转
        setTimeout(() => {
          this.redirectByRole(response.data.user)
        }, 1500)
        
      } catch (error) {
        uni.showToast({
          title: error.message || '登录失败',
          icon: 'error'
        })
      } finally {
        this.isLoading = false
      }
    },
    
    // 跳转忘记密码页面
    goToForgotPassword() {
      uni.navigateTo({
        url: '/pages/auth/forgot-password'
      })
    },
    
    // 跳转到管理后台登录页面
    goToAdminLogin() {
      // #ifdef H5
      // 出于安全考虑，清除管理后台的登录信息，强制重新登录
      if (window.sessionStorage) {
        window.sessionStorage.removeItem('admin_token')
        window.sessionStorage.removeItem('user_role')
        window.sessionStorage.removeItem('admin_user')
      }
      
      // 开发环境跳转到管理后台（端口5174）
      // 生产环境跳转到管理后台路径
      const adminUrl = process.env.NODE_ENV === 'production'
        ? '/admin/login'  // 生产环境：指定到登录页
        : 'http://localhost:5174/login'  // 开发环境：指定到登录页
      
      window.location.href = adminUrl
      // #endif
      
      // #ifndef H5
      uni.showToast({
        title: '请在PC浏览器访问管理后台',
        icon: 'none',
        duration: 3000
      })
      // #endif
    },
    
    // 处理忘记密码（旧方法，保留兼容）
    handleForgotPassword() {
      this.goToForgotPassword()
    },
    
    // 关闭忘记密码弹窗
    closeForgotModal() {
      this.showForgotModal = false
      this.resetForgotForm()
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
        this.countdownTimer = null
      }
    },
    
    // 重置忘记密码表单
    resetForgotForm() {
      this.forgotStep = 1
      this.forgotForm = {
        email: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      }
      this.forgotErrors = {
        email: '',
        verificationCode: '',
        newPassword: '',
        confirmPassword: ''
      }
      this.showNewPassword = false
      this.showConfirmPassword = false
      this.isSendingCode = false
      this.isVerifying = false
      this.isResetting = false
      this.countdown = 0
    },
    
    // 验证邮箱
    validateEmail() {
      const email = this.forgotForm.email.trim()
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      
      if (!email) {
        this.forgotErrors.email = '请输入邮箱地址'
      } else if (!emailRegex.test(email)) {
        this.forgotErrors.email = '请输入有效的邮箱地址'
      } else {
        this.forgotErrors.email = ''
      }
    },
    
    // 验证验证码
    validateVerificationCode() {
      const code = this.forgotForm.verificationCode.trim()
      if (!code) {
        this.forgotErrors.verificationCode = '请输入验证码'
      } else if (code.length !== 6) {
        this.forgotErrors.verificationCode = '验证码为6位数字'
      } else if (!/^\d{6}$/.test(code)) {
        this.forgotErrors.verificationCode = '验证码只能包含数字'
      } else {
        this.forgotErrors.verificationCode = ''
      }
    },
    
    // 验证新密码
    validateNewPassword() {
      const password = this.forgotForm.newPassword
      if (!password) {
        this.forgotErrors.newPassword = '请输入新密码'
      } else if (password.length < 6) {
        this.forgotErrors.newPassword = '密码至少6个字符'
      } else {
        this.forgotErrors.newPassword = ''
      }
      
      // 如果确认密码已填写，重新验证确认密码
      if (this.forgotForm.confirmPassword) {
        this.validateConfirmPassword()
      }
    },
    
    // 验证确认密码
    validateConfirmPassword() {
      const confirmPassword = this.forgotForm.confirmPassword
      if (!confirmPassword) {
        this.forgotErrors.confirmPassword = '请确认新密码'
      } else if (confirmPassword !== this.forgotForm.newPassword) {
        this.forgotErrors.confirmPassword = '两次输入的密码不一致'
      } else {
        this.forgotErrors.confirmPassword = ''
      }
    },
    
    // 切换新密码显示
    toggleNewPassword() {
      this.showNewPassword = !this.showNewPassword
    },
    
    // 切换确认密码显示
    toggleConfirmPassword() {
      this.showConfirmPassword = !this.showConfirmPassword
    },
    
    // 邮箱掩码显示
    maskEmail(email) {
      if (!email) return ''
      const [username, domain] = email.split('@')
      if (username.length <= 2) return email
      const maskedUsername = username[0] + '*'.repeat(username.length - 2) + username[username.length - 1]
      return maskedUsername + '@' + domain
    },
    
    // 发送验证码
    async sendVerificationCode() {
      if (!this.isEmailValid) return
      
      this.isSendingCode = true
      
      try {
        // 调用后端API发送验证码
        await this.apiSendVerificationCode(this.forgotForm.email)
        
        uni.showToast({
          title: '验证码已发送',
          icon: 'success'
        })
        
        // 切换到验证码输入步骤
        this.forgotStep = 2
        this.startCountdown()
        
      } catch (error) {
        uni.showToast({
          title: error.message || '发送失败',
          icon: 'error'
        })
      } finally {
        this.isSendingCode = false
      }
    },
    
    // 开始倒计时
    startCountdown() {
      this.countdown = 60
      if (this.countdownTimer) {
        clearInterval(this.countdownTimer)
      }
      this.countdownTimer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          if (this.countdownTimer) {
            clearInterval(this.countdownTimer)
            this.countdownTimer = null
          }
        }
      }, 1000)
    },
    
    // 验证验证码
    async verifyCode() {
      if (!this.isCodeValid) return
      
      this.isVerifying = true
      
      try {
        // 调用后端API验证验证码
        await this.apiVerifyCode(this.forgotForm.email, this.forgotForm.verificationCode)
        
        uni.showToast({
          title: '验证成功',
          icon: 'success'
        })
        
        // 切换到重置密码步骤
        this.forgotStep = 3
        
      } catch (error) {
        uni.showToast({
          title: error.message || '验证失败',
          icon: 'error'
        })
      } finally {
        this.isVerifying = false
      }
    },
    
    // 重置密码
    async resetPassword() {
      if (!this.isPasswordValid) return
      
      this.isResetting = true
      
      try {
        // 调用后端API重置密码
        await this.apiResetPassword(
          this.forgotForm.email, 
          this.forgotForm.verificationCode, 
          this.forgotForm.newPassword
        )
        
        uni.showToast({
          title: '密码重置成功',
          icon: 'success'
        })
        
        // 关闭弹窗
        this.closeForgotModal()
        
      } catch (error) {
        uni.showToast({
          title: error.message || '重置失败',
          icon: 'error'
        })
      } finally {
        this.isResetting = false
      }
    },
    
    // 返回邮箱输入步骤
    goBackToEmail() {
      this.forgotStep = 1
      this.forgotForm.verificationCode = ''
      this.forgotErrors.verificationCode = ''
    },
    
    // API调用方法（需要连接真实后端）
    async apiSendVerificationCode(email) {
      // TODO: 替换为真实的API调用
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟API调用
          if (Math.random() > 0.1) { // 90%成功率
            resolve({ success: true })
          } else {
            reject(new Error('网络错误，请重试'))
          }
        }, 2000)
      })
    },
    
    async apiVerifyCode(email, code) {
      // TODO: 替换为真实的API调用
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟验证码验证（演示用，实际验证码为123456）
          if (code === '123456') {
            resolve({ success: true })
          } else {
            reject(new Error('验证码错误'))
          }
        }, 1500)
      })
    },
    
    async apiResetPassword(email, code, newPassword) {
      // TODO: 替换为真实的API调用
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          // 模拟密码重置
          if (Math.random() > 0.1) { // 90%成功率
            resolve({ success: true })
          } else {
            reject(new Error('重置失败，请重试'))
          }
        }, 2000)
      })
    },
    
    // 处理注册
    handleRegister() {
      uni.navigateTo({
        url: '/pages/register/register'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
  position: relative;
  overflow: hidden;
}

.status-bar {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  
  .circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    animation: float 6s ease-in-out infinite;
  }
  
  .circle-1 {
    width: 200rpx;
    height: 200rpx;
    top: 10%;
    right: -50rpx;
    animation-delay: 0s;
  }
  
  .circle-2 {
    width: 150rpx;
    height: 150rpx;
    top: 60%;
    left: -30rpx;
    animation-delay: 2s;
  }
  
  .circle-3 {
    width: 100rpx;
    height: 100rpx;
    top: 30%;
    left: 20%;
    animation-delay: 4s;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.login-card {
  position: relative;
  margin: 60rpx 40rpx;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  backdrop-filter: blur(20px);
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.1);
}

.header {
  text-align: center;
  margin-bottom: 80rpx;
  
  .logo {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    border-radius: 24rpx;
    margin: 0 auto 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .logo-icon {
      font-size: 60rpx;
    }
  }
  
  .welcome-text {
    display: block;
    font-size: 48rpx;
    font-weight: 700;
    color: #333;
    margin-bottom: 16rpx;
  }
  
  .subtitle {
    display: block;
    font-size: 28rpx;
    color: #666;
  }
}

.form-container {
  .form-group {
    margin-bottom: 40rpx;
    
    .form-label {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 16rpx;
    }
    
    .input-wrapper {
      position: relative;
      display: flex;
      align-items: center;
      
      .form-input {
        flex: 1;
        height: 88rpx;
        background: #f8f9fa;
        border: 2rpx solid #e1e5e9;
        border-radius: 16rpx;
        padding: 0 60rpx 0 20rpx;
        font-size: 32rpx;
        color: #333;
        transition: all 0.3s ease;
        box-sizing: border-box;
        
        &.error {
          border-color: #ff4757;
          background: #fff5f5;
        }
        
        &:focus {
          border-color: #a6c0fe;
          background: #fff;
          box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
        }
      }
      
      .input-icon {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 32rpx;
        color: #999;
        cursor: pointer;
      }
    }
    
    .error-text {
      display: block;
      font-size: 24rpx;
      color: #ff4757;
      margin-top: 8rpx;
    }
  }
  
  .options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    
    .remember-me {
      display: flex;
      align-items: center;
      cursor: pointer;
      
      .checkbox {
        width: 32rpx;
        height: 32rpx;
        border: 2rpx solid #ddd;
        border-radius: 6rpx;
        margin-right: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        
        &.checked {
          background: #a6c0fe;
          border-color: #a6c0fe;
        }
        
        .checkmark {
          color: white;
          font-size: 20rpx;
          font-weight: bold;
        }
      }
      
      .remember-text {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .forgot-link {
      font-size: 28rpx;
      color: #a6c0fe;
      text-decoration: none;
      cursor: pointer;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .login-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    color: white;
    border: none;
    border-radius: 16rpx;
    font-size: 32rpx;
    font-weight: 600;
    margin-bottom: 40rpx;
    transition: all 0.3s ease;
    cursor: pointer;
    
    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 8rpx 16rpx rgba(166, 192, 254, 0.3);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    
    &.loading {
      background: linear-gradient(135deg, #ccc 0%, #ddd 100%);
    }
  }
  
  .register-link {
    text-align: center;
    
    .register-text {
      font-size: 28rpx;
      color: #666;
    }
    
    .register-btn {
      font-size: 28rpx;
      color: #a6c0fe;
      font-weight: 600;
      cursor: pointer;
      margin-left: 8rpx;
      
      &:hover {
        text-decoration: underline;
      }
    }
  }
  
  .admin-login-link {
    margin-top: 40rpx;
    
    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      
      .divider-line {
        flex: 1;
        height: 1rpx;
        background-color: #e0e0e0;
      }
      
      .divider-text {
        padding: 0 24rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
    
    .admin-btn {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
      border: 2rpx solid #d0d7de;
      border-radius: 16rpx;
      font-size: 28rpx;
      color: #5c6773;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      
      .admin-icon {
        margin-right: 12rpx;
        font-size: 32rpx;
      }
      
      &:hover {
        background: linear-gradient(135deg, #e8ecf1 0%, #dce2e8 100%);
        border-color: #b0b8c0;
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
      }
      
      &:active {
        transform: translateY(0);
      }
    }
  }
}

/* 忘记密码弹窗样式 */
.forgot-password-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
}

.modal-content {
  background: white;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .modal-close {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f5f5f5;
    }
  }
}

.modal-body {
  padding: 40rpx;
}

.step-content {
  .step-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .step-desc {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }
}

.modal-btn {
  width: 100%;
  height: 80rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20rpx;
  
  &.primary {
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    color: white;
    
    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 8rpx 16rpx rgba(166, 192, 254, 0.3);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
  
  &.secondary {
    background: #f8f9fa;
    color: #666;
    border: 2rpx solid #e1e5e9;
    
    &:active {
      background: #e9ecef;
    }
  }
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
  
  .modal-btn {
    flex: 1;
    margin-top: 0;
  }
}

.resend-section {
  text-align: center;
  margin: 20rpx 0;
  
  .resend-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .resend-link {
    font-size: 24rpx;
    color: #a6c0fe;
    cursor: pointer;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

/* 重用登录页面的表单样式 */
.forgot-password-modal .form-group {
  margin-bottom: 30rpx;
  
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    
    .form-input {
      flex: 1;
      height: 80rpx;
      background: #f8f9fa;
      border: 2rpx solid #e1e5e9;
      border-radius: 16rpx;
      padding: 0 60rpx 0 20rpx;
      font-size: 28rpx;
      color: #333;
      transition: all 0.3s ease;
      box-sizing: border-box;
      
      &.error {
        border-color: #ff4757;
        background: #fff5f5;
      }
      
      &:focus {
        border-color: #a6c0fe;
        background: #fff;
        box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
      }
    }
    
    .input-icon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28rpx;
      color: #999;
      cursor: pointer;
    }
  }
  
  .error-text {
    display: block;
    font-size: 22rpx;
    color: #ff4757;
    margin-top: 8rpx;
  }
}

/* 忘记密码弹窗样式 */
.forgot-password-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 40rpx;
}

.modal-content {
  background: white;
  border-radius: 24rpx;
  width: 100%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.15);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  .modal-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .modal-close {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #999;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
    
    &:hover {
      background: #f5f5f5;
    }
  }
}

.modal-body {
  padding: 40rpx;
}

.step-content {
  .step-title {
    display: block;
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 12rpx;
  }
  
  .step-desc {
    display: block;
    font-size: 24rpx;
    color: #666;
    margin-bottom: 40rpx;
    line-height: 1.5;
  }
}

.modal-btn {
  width: 100%;
  height: 80rpx;
  border: none;
  border-radius: 16rpx;
  font-size: 28rpx;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20rpx;
  
  &.primary {
    background: linear-gradient(135deg, #a6c0fe 0%, #c2a8fd 100%);
    color: white;
    
    &:not(:disabled):active {
      transform: translateY(2rpx);
      box-shadow: 0 8rpx 16rpx rgba(166, 192, 254, 0.3);
    }
    
    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
  
  &.secondary {
    background: #f8f9fa;
    color: #666;
    border: 2rpx solid #e1e5e9;
    
    &:active {
      background: #e9ecef;
    }
  }
}

.modal-buttons {
  display: flex;
  gap: 20rpx;
  margin-top: 20rpx;
  
  .modal-btn {
    flex: 1;
    margin-top: 0;
  }
}

.resend-section {
  text-align: center;
  margin: 20rpx 0;
  
  .resend-text {
    font-size: 24rpx;
    color: #999;
  }
  
  .resend-link {
    font-size: 24rpx;
    color: #a6c0fe;
    cursor: pointer;
    
    &:hover {
      text-decoration: underline;
    }
  }
}

/* 重用登录页面的表单样式 */
.forgot-password-modal .form-group {
  margin-bottom: 30rpx;
  
  .input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    
    .form-input {
      flex: 1;
      height: 80rpx;
      background: #f8f9fa;
      border: 2rpx solid #e1e5e9;
      border-radius: 16rpx;
      padding: 0 60rpx 0 20rpx;
      font-size: 28rpx;
      color: #333;
      transition: all 0.3s ease;
      box-sizing: border-box;
      
      &.error {
        border-color: #ff4757;
        background: #fff5f5;
      }
      
      &:focus {
        border-color: #a6c0fe;
        background: #fff;
        box-shadow: 0 0 0 6rpx rgba(166, 192, 254, 0.1);
      }
    }
    
    .input-icon {
      position: absolute;
      right: 20rpx;
      top: 50%;
      transform: translateY(-50%);
      font-size: 28rpx;
      color: #999;
      cursor: pointer;
    }
  }
  
  .error-text {
    display: block;
    font-size: 22rpx;
    color: #ff4757;
    margin-top: 8rpx;
  }
}
</style>
